<template>
  <div>
    <el-input v-show="false" v-model="fileKey" placeholder="输入 Redis Key"></el-input>
    <!--    <el-button type="primary" @click="fetchCsvData">加载数据</el-button>-->
    <el-button type="primary" @click="preStep">上一步</el-button>
    <el-button type="primary" @click="analyzeData">分析数据</el-button>

    <p>下面表格数据展示的是excel文件中的数据，请核对数据是否完全匹配</p>
    <p>如果数据识别不符，请重新上传文件</p>
    <p>如果数据正确，可以点击分析数据按钮，为你展示数据报表</p>
    <p>数据总览：系统共识别到
      <el-tag>{{ tableData.length }}</el-tag>
      条数据
    </p>

    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :prop="col"
        :label="col"
      />
    </el-table>
  </div>
</template>

<script>
import { analyzeDataReq, getFileData } from '@/api/systemTools'

export default {
  props: {
    redisKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileKey: '',
      columns: [], // 表头
      tableData: [] // 数据行
    }
  },
  created() {
    this.fileKey = this.redisKey
    this.fetchCsvData()
  },
  methods: {
    async fetchCsvData() {
      if (!this.fileKey) {
        this.$message.error('请先输入 Redis Key')
        return
      }

      try {
        const res = await getFileData({ redisKey: this.fileKey })

        this.columns = res.headers
        // 把二维数组转成对象数组 [{col1: val1, col2: val2, ...}]
        this.tableData = res.rows.map(row => {
          const obj = {}
          res.headers.forEach((key, index) => {
            obj[key] = row[index]
          })
          return obj
        })

      } catch (err) {
        this.$message.error('加载失败: ' + err)
      }
    },
    analyzeData() {
      this.$emit('next', this.redisKey)
    },
    preStep() {
      this.$emit('prev')
    }
  }
}
</script>
